import { View, Image } from "@tarojs/components";
import { $route } from "@utils/index";
const TutorialList = (props) => {
  const { videos } = props;
  const jumpToDetail = (video: Detail) => {
    const { applet_app_id, applet_path, type, id } = video;
    const url = type == 5 ? applet_path : `/pages/index/detail?id=${id}`;
    const appId = type == 5 ? applet_app_id : "";
    $route({ url, appId });
  };
  return (
    <>
      {videos?.map((video) => {
        return (
          <View
            key={video?.id}
            onClick={jumpToDetail.bind(null, video)}
            className="flex mb-[15px] p-[15px] bg-white rounded-[20px]"
          >
            <Image
              src={video?.cover_image}
              className="w-[180px] h-[180px] rounded-[20px] mr-[20px] flex-none block"
            />
            <View className="grow">
              <View className="text-[30px] mb-[10px] font-bold line-clamp-1">
                {video?.name}
              </View>
              <View className="text-[26px] line-clamp-3 text-[#666]">
                {video?.desc}
              </View>
            </View>
          </View>
        );
      })}
    </>
  );
};
export default TutorialList;
